<template>
  <div class="">
    <div :id="chartId" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  props: ["chartId", "datas"],
  created(){
    this.$nextTick(()=>{
      this.$watch('datas',()=>{
        this.initChart();
      })
    })
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let myChart = echarts.init(document.getElementById(this.chartId));
      const color = ["#33B5FF ", "#22E59C","#FDDD60","#f75444"];

      var series = [];
      for (let i = 0; i < this.datas.legendData.length; i++) {
        let obj = {
          name: this.datas.legendData[i],
          type: "line",
          symbol: "circle",
          symbolSize: 6,
          itemStyle: {
            color: color[i % color.length],
            borderWidth: 6,
            borderColor: "rgba(51, 181, 255, .2)",
          },
          lineStyle: {
            normal: {
              width: 2,
              color: color[i % color.length], // 线条颜色
            },
          },
          label: {
            show: false,
            color: "rgba(255,255,255, 0.6)",
          },
          data: this.datas.data[i],
        };
        series.push(obj);
      }
      // 绘制图表
      myChart.setOption({
        grid: {
          top: "15%",
          bottom: "20%",
          left: "8%",
          right: "8%",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            // X轴刻度标签
            color: "rgba(255, 255, 255, 0.6)",
            fontSize: 12,
          },
          axisLine: {
            // X轴线
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, .4)",
            },
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: {
              type: "dashed",
              width: 1,
              color: "rgba(255, 255, 255, .2)",
            },
          },
          axisTick: {
            show: false,
          },
          data: this.datas.xPoint,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "rgba(255, 255, 255, .6)",
            fontSize: 12,
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: {
              type: "dashed",
              width: 1,
              color: "rgba(255, 255, 255, .2)",
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        legend: {
          data: this.datas.legendData,
          left: "center",
          top: 0,
          itemHeight: 8,
          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
          itemStyle: {
            borderWidth: 6,
            borderColor: "rgba(51, 181, 255, .2)",
          },
          show: false,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(33, 85, 154, .6)",
          borderWidth: 1,
          borderColor: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(85, 149, 233, .6)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(85, 149, 233, 0)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          padding: 8,
          textStyle: {
            color: "#fff",
          },
          axisPointer: {
            lineStyle: {
              type: "dashed",
              color: "rgba(255, 255, 255, .6)",
            },
          },
          extraCssText: "box-shadow: 2px 2px 16px 1px rgba(0, 39, 102, 0.16)",
          formatter: function (params) {
            let content = `<div style='font-size: 14px; color: #fff;'>${params[0].name}</div>`;
            if (Array.isArray(params)) {
              for (let i = 0; i < params.length; i++) {
                content += `
                  <div style='display: flex; align-items: center; padding: 4px; background: #21559A; margin-top: 4px; color: #fff;'>
                    <div style='width: 10px; height: 10px; background: ${params[i].color}; margin-right: 8px;'></div>
                    <div style='font-size: 12px; margin-right: 32px;'>${params[i].seriesName}</div>
                    <div style='font-size: 14px;'>${params[i].value}</div>
                  </div>
                `;
              }
            }
            return content;
          },
        },
        series,
      });

      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
    },
  },
};
</script>
<style scoped lang="scss">
.chart {
  height: 260px;
}
</style>
